<template>
  <div class="attendances-container">
    <div class="app-container">
      <h2>
        考勤
        <!-- <button @click="$router.push('/import?name=att')">导入</button> -->
      </h2>
      <!-- <ImageUpload :limit="5" /> -->
      <son ref="SonRef" :str="str" />
      <button @click="fn"> 按钮 </button>
      {{ str }} <button @click="str = 'xyz'">按钮2</button>
    </div>
  </div>
</template>

<script>
// 挂载顺序
// 父组件中挂载了子组件执行的顺序
// 父组件执行beforeCreate, created, beforeMount =>
// 子组件的beforeCreate,created,beforeMount, mounted =>
// 父组件的mounted

//  更新顺序
// 父组件中的数据传递给子组件, 数据做了更新 更新顺序
// 父组件的beforeUpdate => 子组件的beforUpdate,updated => 父组件的updated
import Son from './Son.vue'
import mix from '@/mixins'
export default {
  name: 'Attendances',
  components: { Son },
  mixins: [mix],
  data() {
    return {
      str: 'abc',
      msg: '我是考勤页面'
    }
  },
  // created() {
  //   console.log('hello')
  // },
  // beforeCreate() {
  //   console.log('我是父组件的beforeCreate')
  // },
  // created() {
  //   console.log('我是父组件的created')
  // },
  // beforeMount() {
  //   console.log('我是父组件的beforeMount')
  // },
  // mounted() {
  //   console.log('我是父组件的mounted')
  // },
  // beforeUpdate() {
  //   console.log('父组件beforeUpdate')
  // },
  // updated() {
  //   console.log('父组件updated')
  // },
  methods: {
    fn() {
      console.log(this.$refs.SonRef.num)
    }
  }
}
</script>

<style>

</style>
